<script lang="ts" setup>
import { UserStore } from "@/store";
//import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";
import { RouterEnums } from "@/types";
import { useRouter } from "vue-router";
//import { UserInfoRes } from "@/types";
import avatar from "@/image/new_img/logo1080FgzU_320.png";
import { FiltrationFun } from "@/utils";
const userStore = UserStore();
const router = useRouter();
const userInfo = () => {
  return {
    account: {
      uid: 0,
      accountState: 0,
      username: "",
    },
    profile: {
      email: "",
      avatar: "",
      language: 0,
      areaNo: 0,
      phoneNo: 0,
    },
  };
};
const getUsetInfo = ref(userInfo());
//获取参数
onMounted(() => {
  const { account, profile } = userStore.userLoginInfo;
  getUsetInfo.value.account = account;
  getUsetInfo.value.profile = profile;
});
const loginRegister = type => {
  router.push({
    path: "/" + RouterEnums.LOGIN,
    query: { type: type },
  });
};
</script>
<template>
  <!-- 首页底部 -->
  <div class="bottom-page-frame">
    <div class="bottom-content">
      <div v-if="!userStore.isLogin" class="not-logged df ai-center jc-space-around">
        <img
          class="loginRegister"
          src="@/image/new_img/home/homev2_bottom_login.png"
          @click="loginRegister('1')"
        />
        <img
          class="loginRegister"
          src="@/image/new_img/home/homev2_bottom_reg.png"
          @click="loginRegister('2')"
        />
      </div>
      <div v-else class="not-logged df ai-center jc-space-between">
        <div class="df ai-center">
          <div class="user-img-frame">
            <img
              class="user-img"
              :src="
                userStore.userInfoDetails.profile.avatar !== ''
                  ? userStore.userInfoDetails.profile.avatar
                  : avatar
              "
            />
            <div class="grade-frame">V{{ userStore.userInfoDetails.account.vipLevel }}</div>
          </div>
          <div class="money-frame df ai-center">
            <img class="money-img" src="@/image/new_img/home/user_img/pdd_icon_coin.png" />
            <div class="money-val">{{ FiltrationFun.formatNumber(userStore.balance) }}</div>
          </div>
          <img
            class="bottom-topup"
            src="@/image/new_img/home/homev2_bottom_topup.png"
            @click="router.push(RouterEnums.RECHARGE)"
          />
        </div>
        <img
          class="bottom_refund"
          src="@/image/new_img/home/homev2_bottom_refund.png"
          @click="router.push(RouterEnums.WITHDRAWALS)"
        />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.bottom-page-frame {
  width: 100%;
  height: 133.5px;
  //max-width:750px;
  position: fixed;
  bottom: 0;
  z-index: 200;

  /* ///兼容 IOS>11.2/ */
  .bottom-content {
    width: 100%;
    height: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    padding-bottom: constant(safe-area-inset-bottom);
    /* ///兼容 IOS<11.2/ */
    padding-bottom: env(safe-area-inset-bottom);
    /*半透明背景色 */
    backdrop-filter: blur(20px);
    /*背景模糊效果 */
    -webkit-backdrop-filter: blur(20px);
    background-color: #222222e6;
    position: relative;
    left: 0;
    top: 0;

    .loginRegister {
      width: 320px;
      height: 80px;
    }
  }
}

.money-val {
  font-size: 26px;
  color: #ffffff;
  font-weight: 700;
}

.money-img {
  width: 33px;
  height: 33px;
  margin-right: 10px;
}

.user-img-frame {
  margin-left: 27px;
  width: 80px;
  height: 80px;
  margin-right: 15px;
  position: relative;
  left: 0;
  top: 0;
}

.user-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.not-logged {
  width: 100%;
  height: 100%;
}

.grade-frame {
  padding: 8px;
  background: #ab3fe7;
  font-size: 18px;
  position: absolute;
  border-radius: 50%;
  right: -5px;
  top: -7px;
  color: #ffffff;
}

.bottom-topup {
  width: 168px;
  height: 61px;
  margin-left: 22px;
}

.bottom_refund {
  width: 66px;
  height: 66px;
  margin-right: 27px;
}
</style>
